<template>
	<!-- 发布宠物店家 -->
	<view class="content">
		<u--form labelPosition="left" :model="form" ref="form1">
			<text class="wranning">禁止发布不实内容或国家保护动物、稀有动物，如有违者平台将对其封号并交由相关部门处置</text>
			<u-form-item labelWidth="180" label="宠物类型" borderBottom @click="show=true">
				<u--input v-model="name" border="none" placeholder="宠物类型" disabled disabledColor="transparent"></u--input>
				<u-picker :show="show" :columns="columns" @confirm="confirmType" @cancel="show=false" closeOnClickOverlay
					@close="show=false"></u-picker>
			</u-form-item>
			<u-form-item labelWidth="180" label="宠物品种" borderBottom>
				<u--input v-model="form.race" border="none" placeholder="例如:金毛 哈士奇..."></u--input>
			</u-form-item>
			<u-form-item labelWidth="180" label="宠物性别" borderBottom><u-radio-group v-model="form.sex">
					<block class="flex">
						<view class="pl-12">
							<u-radio activeColor="#ff0000" label="公" name="1" size="45" labelSize="30" iconSize="45"></u-radio>
						</view>
						<view class="pl-12">
							<u-radio activeColor="#4658ff" label="母" name="0" size="45" labelSize="30" iconSize="45"></u-radio>
						</view>
					</block>
				</u-radio-group>
			</u-form-item>
			<u-form-item labelWidth="180" label="宠物价格" borderBottom>
				<view class="flex">
					<view class="w-80">
						<u--input v-model="form.money" border="none" type="number" maxlength="5" placeholder="金额"></u--input>
					</view>
					<text>元</text>
				</view>
			</u-form-item>
			<u-form-item labelWidth="180" label="疫苗情况" borderBottom>
				<u-radio-group v-model="form.vaccine">
					<block class="flex">
						<view class="pl-12">
							<u-radio activeColor="#ff0000" label="无" name="0" size="45" labelSize="30" iconSize="45"></u-radio>
						</view>
						<view class="pl-12">
							<u-radio activeColor="#ff5500" label="一针" name="1" size="45" labelSize="30" iconSize="45"></u-radio>
						</view>
						<view class="pl-12">
							<u-radio activeColor="#4658ff" label="二针" name="2" size="45" labelSize="30" iconSize="45"></u-radio>
						</view>
						<view class="pl-12">
							<u-radio activeColor="#00ff00" label="三针" name="3" size="45" labelSize="30" iconSize="45"></u-radio>
						</view>
					</block>
				</u-radio-group>
			</u-form-item>
			<u-form-item labelWidth="180" label="备注" borderBottom>
				<u--input v-model="form.note" border="none" placeholder="宠物身体健康,性格活泼.."></u--input>
			</u-form-item>
			<view class="miantilte mtb-12">
				添加宠物轮播图片（{{fileList.length}}/5）
			</view>
			<view class="sub-title-text">
				添加宠物轮播图片可以提高您的曝光度,默认图为示例，直接点击图片即可多传
			</view>
			<view class="uni-form-item upload flex wrap">
				<block v-if="fileList.length">
					<view v-for="(item,index) in fileList" :key="index" class="imgwrap relative">
						<image :src="item" mode="widthFix" class="uploadImg" @click="choose"></image>
						<view class="index absolute">
							{{index+1}}
						</view>
						<view class="x absolute" @click.self="del(item,index)">
							<image src="../../../static/icon/del.png" mode=""></image>
						</view>
					</view>
				</block>
				<image src="../../../static/icon/add.png" class="addImg" @click="choose" alt="" v-else>
				</image>
			</view>
			<view class="isShow">
				<checkbox-group @change="isVideo">
					<label>
						<checkbox value="1" checked="true" />是否上传视频？
					</label>
				</checkbox-group>
			</view>
			<view class="videos" v-if="videoLock">
				<view class="miantilte mtb-12">
					上传视频(仅可上传一条)
				</view>
				<view class="uploadVideo w-80" style="min-height: 400rpx;background-color: aliceblue;" @click="uploadVideo"
					v-if="!video">
					<image src="../../../static/icon/add.png" style="width: 220rpx;height: 220rpx;margin-top: 100rpx;">
				</view>
				<view class="relative" v-else>
					<!-- <video style="width: 100%;" controls src="cloud://animal-4g5ks6ct0e7f251e.616e-animal-4g5ks6ct0e7f251e-1315698572/belostvideo/狗3.mp4"></video> -->
					<video style="width: 100%;" controls :src="video"></video>
					<view class="absolute x" style="top:20rpx;right:20rpx" @click="delVideo">
						<image src="../../../static/icon/del.png" mode="" style="width: 80rpx;height: 80rpx;"></image>
					</view>
				</view>
			</view>
		</u--form>
		<u-button type="success" text="确认发布" customStyle="margin-top: 50px" @click="submit"></u-button>
		<!-- <u-button type="success" text="确认上传" customStyle="margin-top: 50px" @click="upload"></u-button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList: [
					"https://616e-animal-4g5ks6ct0e7f251e-1315698572.tcb.qcloud.la/logo.png?sign=ffe3e111a4b0466169e3cee81c1a2b4f&t=1721984968"
				],
				show: false,
				form: {
					type: "",
					race: "",
					sex: "",
					vaccine: "",
					money: "",
					note: ''
				},
				columns: [
					['狗', '猫', '其他', ]
				],
				video: null,
				name: '',
				videoLock: true,
			}
		},
		onLoad() {

		},
		methods: {
			async submit() {
				// console.log('form发生了submit事件，携带数据为：' + JSON.stringify(this.form))
				uni.showLoading({
					mask: true,
					title: "上传中"
				})
				let promises = [];
				for (let i = 0; i < this.fileList.length; i++) {
					let filePath = this.fileList[i];
					// 将每个上传操作添加到promises数组中
					promises.push(this.uploadFile.call(this, filePath)); // 使用call确保this指向正确
				}
				let fileIDs = await Promise.all(promises)
				let videoPath = null
				if (this.videoLock) {
					videoPath = await this.uploadVideoFun(this.video)
				}

				let res = await wx.cloud.callFunction({
					name: 'logins',
					data: {
						useName: 'addPet', //捡到、找到
						...this.form,
						uploadDate: this.$formatDateTime(new Date(), 1),
						swiperList: fileIDs,
						videoSrc: videoPath
					}
				})
				uni.hideLoading()
				uni.showToast({
					title: '发布成功',
					icon: 'success',
					duration: 2000
				})
				uni.navigateBack()
			},
			isVideo(e) {
				// console.log('e: ', e.detail.value);
				if (!e.detail.value.length) {
					this.videoLock = false
				} else {
					this.videoLock = true
				}
			},
			uploadFile(filePath) {
				return new Promise((resolve, reject) => {
					let fileName = filePath.split('/').pop(); // 获取文件名
					this.$clould.uploadFile({
						cloudPath: 'bolost/' + fileName,
						filePath: filePath,
						success: res => {
							resolve(res.fileID);
						},
						fail: err => {
							uni.hideLoading()
							uni.showToast({
								title: '请上传图片',
								icon: 'error',
								duration: 2000
							})
							reject(err);
						}
					});
				});
			},
			uploadVideoFun(filePath) {
				return new Promise((resolve, reject) => {
					let fileName = filePath.split('/').pop(); // 获取文件名
					this.$clould.uploadFile({
						cloudPath: 'belostvideo/' + fileName,
						filePath: filePath,
						success: res => {
							resolve(res.fileID);
						},
						fail: err => {
							reject(err);
						}
					});
				});
			},
			choose() {
				uni.chooseMedia({
					count: 5,
					mediaType: ['image'],
					sourceType: ['album'],
					success: (res) => {
						let filelist = res.tempFiles
						let arr = []
						for (let i = 0; i < filelist.length; i++) {
							let filePath = filelist[i].tempFilePath
							arr.push(filePath)
						}
						setTimeout(() => {
							this.fileList = arr.reverse()
							// console.log("res:---", this.fileList, arr)
						}, 0)
					}
				})
			},
			uploadVideo() {
				uni.chooseMedia({
					count: 1,
					mediaType: ['video'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						let filelist = res.tempFiles
						this.video = filelist[0].tempFilePath
					}
				})
			},
			delVideo() {
				this.video = null
			},
			del(item, index) {
				this.fileList = this.fileList.filter(ite => ite !== item)
			},
			addressClick() {
				uni.chooseAddress({
					success: (res) => {
						// console.log(res.userName)
						// console.log(res.postalCode)
						// console.log(res.provinceName)
						// console.log(res.cityName)
						// console.log(res.countyName)
						// console.log(res.detailInfo)
						// console.log(res.nationalCode)
						// console.log(res.telNumber)
						this.form.username = res.userName
						this.form.tel = res.telNumber
						this.form.address = res.provinceName + res.cityName + res.countyName + res.detailInfo
					}
				})
			},
			checkDate(e) {
				console.log(e);
				// this.form.date=e[0]
				// this.show=false
			},
			confirmType(e) {
				this.name = e.value[0]
				if (this.name == '狗') this.form.type = 0
				if (this.name == '猫') this.form.type = 1
				if (this.name == '其他') this.form.type = 2
				// console.log('e: ', e);
				this.show = false
			}

		}
	}
</script>

<style scoped lang="scss">
	.content {
		text-align: center;
		min-height: 100vh;
		padding: $uni-spacing-row-base;
		background: linear-gradient(#9baeff, #007aff);

		.uni-form-item {
			padding: 20rpx 0;
		}

		.upload {
			.addImg {
				width: 220rpx;
				height: 220rpx;
				margin: 8rpx;
				// width: 100%;
			}

			.imgwrap {
				.uploadImg {
					width: 220rpx;
					margin: 8rpx;
					// width: 100%;
				}

				.index {
					bottom: 10rpx;
					left: 10rpx;
				}

				.x {
					top: 10rpx;
					right: 10rpx;

					image {
						width: 64rpx;
						height: 64rpx;
					}
				}
			}
		}
	}
</style>